<template>
    <fieldset>
        <legend>{{name}}</legend>
        <ul>
            <li v-for="item in carts" :key="item.id">
                <b>产品名称：{{item.title}}</b>
                |
                <b>单价：{{item.price}}</b>
                |
                <b>数量：{{item.count}}</b>
                ------
                <button @click="remove(item)">移出购物车</button>
            </li>
        </ul>
        <h1>
            总价：
            <span style="color:red">{{ total }} ￥</span>
        </h1>
    </fieldset>
</template>

<script>
import {mapState,mapMutations,mapActions,mapGetters} from "vuex"
//mapState ('模块名称',['属性名])
export default{
    computed:{
        ...mapState('cart',['name','carts']),
        ...mapGetters('cart',['total'])
    },
    mounted(){
        //不使用辅助函数，调用模块化中的ADC
        // this.$store.commit('cart/ADC')
        //使用辅助函数调用
        this.ADC()
    },
    methods:{
        ...mapMutations('cart',['ADC']),
        ...mapActions('cart',['REMOVE_CART']),
        remove(item){
            this.REMOVE_CART(item)
        }
    }
}
</script>